<template>
  <el-card>

    <!--  表格操作  -->
    <div class="select-div">
      <el-button type="primary" size="small" icon="el-icon-refresh" @click="loadOnlineUserList(1)">
        刷新
      </el-button>

      <el-button type="danger" size="small" icon="el-icon-switch-button" :disabled="this.selection.length === 0"
                 @click="removeOnlineUser()">
        下线选中用户
      </el-button>
    </div>

    <!--  表格内容  -->
    <el-table ref="onlineTable"
              :data="tableData"
              border
              highlight-current-row
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="username" label="账号名"></el-table-column>

      <el-table-column prop="roleNameList" label="角色">
        <template slot-scope="scope">
          <el-tag v-for="item of scope.row.roleNameList"
                  :key="item.id"
                  style="margin-right:0.2rem;margin-top:0.2rem">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="ip" label="IP"></el-table-column>

      <el-table-column prop="region" label="归属地"></el-table-column>

      <el-table-column prop="loginTime" label="登录时间"></el-table-column>

      <el-table-column prop="client" label="客户端类型"></el-table-column>

      <el-table-column prop="os" label="操作系统"></el-table-column>

      <el-table-column prop="browser" label="浏览器"></el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="强制下线" placement="top-start">
            <el-button circle icon="el-icon-switch-button" size="mini" placement="top-start" type="danger"
                       @click="removeOnlineUser(scope.row.id)"/>
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>

    <!--  分页  -->
    <pagination
        :total="total"
        :page_index="pageNum"
        @pageChange="pageChange"
    />
  </el-card>
</template>

<script>
import { userApi } from '@/api';

export default {
  name: "Online",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      selection: [],
      selectedNum: 0
    }
  },

  methods: {
    /**
     * 分页回调函数
     * @param val
     */
    pageChange(val) {
      this.pageNum = val.pageNum;
      this.pageSize = val.pageSize;
      this.loadOnlineUserList();
    },

    /**
     * 复选框事件
     * @param selection 选中数据数组
     */
    handleSelectionChange(selection) {
      this.selection = selection.map(item => item.id)
      this.selectedNum = selection.length
    },

    /**
     * 下线用户
     */
    removeOnlineUser(userId) {
      const ids = userId == null ? this.selection : [userId];
      console.log(ids);
      userApi.removeOnlineUsers(ids).then(response => {
        if (response.data.code === 20000) {
          this.$message.success('操作成功!');
        }
        this.loadOnlineUserList(1);
      })
    },

    /**
     * 获取在线用户列表
     */
    loadOnlineUserList(num) {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      
      userApi.getOnlineUserList(params).then((response) => {
        if (response.data.code === 20000) {
          if (response.data.data != null) {
            this.tableData = response.data.data.pagingList;
            this.total = response.data.data.count;
            if (num === 1) {
              this.$message.success('刷新成功!')
            }
            return;
          }
          this.tableData = null;
          this.total = null;
        }
      })
    }

  },


  created() {
    this.loadOnlineUserList()
  }
}
</script>

<style scoped>

</style>